<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no,maximum-scale=1">
    <title>组态websocket 示例</title>
    <style>
        textarea,input,button {
            width: 300px;height: 40px;font-size: 20px;
            margin: 5px;
        }
    </style>
</head>
<body>
<textarea type="text" id="message" rows="10">54-00-02-001,54-00-02-002</textarea><br>
<button onclick="addSub()">订阅变量</button><br>
<button onclick="removeSub()">移除订阅变量</button><br>
<button onclick="getSub()">获取已订阅变量</button><br>
<button onclick="auth()">token授权</button><br>
<button onclick="export_project()">导出工程</button><br>
<button onclick="project_list()">工程列表</button><br>
<script src="../src/js/axios.min.js"></script>
<script>

    axios.defaults.headers.common['Authorization'] = 'a928cff1d986743eea3aceade7c201f4';

    let socket;
    let msgEl = document.getElementById("message")
    // let speedEl = document.getElementById("speed")

    function connectWebSocket() {
        reconnecting = true
        socket = new WebSocket("ws://192.168.1.15:12345/echo");

        socket.onopen = function (res) {
            console.log("连接成功");
        }

        socket.onclose = function (e) {
            console.log("WebSocket closed");
        }

        socket.onerror = function (err) {
            console.log("WebSocket error")
        }

        socket.onmessage = function(e) {
            console.log("响应原始数据",e.data);
        };
    }
    // 启动 WebSocket 连接
    connectWebSocket();

    function auth() {

        axios.post("http://192.168.1.15:9201/api/do_login", {
            username: "mike",
            password: "123456"
        }).then(res => {
            console.log("res",res);
            if(res.status !== 200) {
                alert("请求失败");
                return
            }
            res = res.data
            console.log("res.data",res);
            if(res.code === 0) {
                let data = {
                    type: 90, // token 授权
                    data: res.data.token // 这个 token 是客户端登录返回的 token
                }
                socket.send(JSON.stringify(data))
            }else {
                alert("授权失败");
            }
        }).catch(err => {
            console.log(err);
        })
       
    }

    function addSub() {
        console.log(msgEl.value);
        
        let data = {
            type: 100, // 订阅变量
            data: msgEl.value
        }
        socket.send(JSON.stringify(data))
    }
    
    function removeSub() {
        let data = {
            type: 101, // 移除订阅变量
            data: msgEl.value
        }
        socket.send(JSON.stringify(data))
    }
    function getSub() {
        let data = {
            type: 102, // 查看已订阅变量
            data: ""
        }
        socket.send(JSON.stringify(data))
    }

    function export_project() {

        axios.post("http://192.168.1.15:9201/admin/project/export", 
            {
                id: 1
            }
        ).then(res => {
            if(res.status !== 200) {
                alert("请求失败");
                return
            }
            res = res.data
            console.log("res.data",res);
            
        }).catch(err => {
            console.log(err);
        })
       
    }
    function project_list() {

        axios.post("http://192.168.1.15:9201/admin/project/list", {
            page: 1,
            size: 10
        }).then(res => {
            if(res.status !== 200) {
                alert("请求失败");
                return
            }
            res = res.data
            console.log("res.data",res);
            
        }).catch(err => {
            console.log(err);
        })  

    }
</script>
</body>
</html>
// http://192.168.1.15:8800/html/websocket/zutai.html